<!--
 * @Description: 一周内历史报警统计
 * @FilePath: \hk-computerRoom-Security\src\views\home\component\alarm-history.vue
 * @Date: 2024-01-17 09:35:42
 * @LastEditTime: 2024-02-06 15:05:00
-->
<template>
	<div>
		<EchartsBox :title="'一周内历史报警统计'">
			<template #content>
				<div class="content-box">
					<div class="selected-type">
						<span>报警类型 : </span>
						<div class="type-selection">
							<div class="type-btn" :class="state.type == 1 ? 'btn2' : ''" @click="getHistoryAlarm(1)">高温</div>
							<div class="type-btn" :class="state.type == 2 ? 'btn2' : ''" @click="getHistoryAlarm(2)">漏水</div>
						</div>
					</div>
					<div class="list-content">
						<div class="listHead">
							<div class="header1">序号</div>
							<div class="header2">时间</div>
							<div class="header3">楼栋</div>
							<div class="header4">科室</div>
							<div class="header5">机房号</div>
							<div class="header6">设备型号</div>
						</div>
						<div class="scrollList" v-if="state.infoList.length">
							<Vue3SeamlessScroll
								style="width: 100%; height: 100%"
								:list="state.infoList"
								:hover="true"
								:wheel="true"
								:step="0.5"
								:limitScrollNum="4"
							>
								<div v-for="(item, index) in state.infoList" :key="item" class="listItem" :class="{ listItemOdd: index % 2 == 0 }">
									<div class="header1">{{ index + 1 }}</div>
									<div class="header2">
										{{ item.createTime }}
									</div>
									<div class="header3">{{ item.buildingName }}</div>
									<div class="header4">{{ item.departmentName }}</div>
									<div class="header5">{{ item.roomName }}</div>
									<div class="header6">{{ item.model }}</div>
								</div>
							</Vue3SeamlessScroll>
						</div>
						<NoData class="scrollList" v-else></NoData>
					</div>
				</div>
			</template>
		</EchartsBox>
	</div>
</template>
<script setup lang="ts" name="alarm-history">
import { onMounted, reactive } from 'vue';
import EchartsBox from './echarts-box.vue';
import { useHomeApi } from '/@/api/home/index';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
const state: any = reactive({
	infoList: [],
	type: 1, // 1高温 2漏水
});

onMounted(() => {
	getHistoryAlarm(state.type);
});

// 获取历史报警统计
const getHistoryAlarm = async (type: number) => {
	state.type = type;
	const { data } = await useHomeApi().queryAlarmRecordOneWeek({ type });
	state.infoList = data;
};
</script>
<style lang="scss" scoped>
.content-box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	.selected-type {
		display: flex;
		align-items: center;
		margin-top: 10px;
		margin-left: 10px;

		.type-selection {
			width: 120px;
			height: 30px;
			margin-left: 10px;
			border: 1px solid #367dde;
			display: flex;

			.type-btn {
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 16px;
				padding: 0px;
				cursor: pointer;
			}
		}
	}
	.list-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 10px 0px;
		overflow: hidden;
		.listHead {
			padding: 0px 5px;
			display: flex;
			align-items: center;
			text-align: center;
			width: 100%;
			height: 30px;
			font-size: 16px;
			color: #fff;
			background-color: #1e4897;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		}

		.scrollList {
			width: 100%;
			height: 200px;
			overflow: hidden;
			.listItem {
				display: flex;
				align-items: center;
				width: 100%;
				// height: 50px;
				padding: 5px;
				text-align: center;
				font-size: 14px;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				color: #ffffff;

				&:hover {
					background: linear-gradient(180deg, rgba(108, 59, 44, 0) 0%, #6c3b2c 100%);
					border-bottom: 1px solid;
					border-image: linear-gradient(270deg, rgba(243, 61, 36, 0), rgba(201, 94, 79, 1)) 1 1;
				}
			}

			:deep(.no-data) {
				width: 200px;
				height: 200px;
			}
		}

		.listItemOdd {
			background: #1e4897;
		}

		.header1 {
			width: 10%;
		}

		.header2 {
			width: 25%;
		}

		.header3 {
			width: 10%;
		}

		.header4 {
			width: 20%;
		}

		.header5 {
			width: 15%;
		}
		.header6 {
			width: 20%;
		}
	}
}
</style>
